<style>
  body {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 720px;
    background: url(images/index-bg.jpg);
    background-color: transparent;
  }

  #main-0 {
    position: absolute;
    left: 45px;
    top: 140px;
  }

  #main-0 .item {
    position: absolute;
    background: url(images/loading-placeholder.png) repeat;
  }

  #main-0-0 {
    width: 455px;
    height: 300px;
  }

  #main-0-1,
  #main-0-2,
  #main-0-3 {
    width: 225px;
    height: 300px;
  }

  #main-0-1 {
    left: 475px
  }

  #main-0-2 {
    left: 720px;
  }

  #main-0-3 {
    left: 965px;
  }

  #main-1 {
    position: absolute;
    left: 45px;
    top: 460px;
  }

  #main-1 .item {
    position: absolute;
    background: url(images/loading-placeholder.png) repeat;
  }

  #main-1-0 {
    width: 284px;
    height: 168px;
  }

  #main-1-1,
  #main-1-2,
  #main-1-3 {
    width: 282px;
    height: 168px;
  }

  #main-1-1 {
    left: 304px;
  }

  #main-1-2 {
    left: 606px;
  }

  #main-1-3 {
    left: 908px;
  }

  #main-0 img,
  #main-1 img {
    width: 100%;
    height: 100%;
  }
</style>


<div id="main-0">
  <div id="main-0-0" class="item item-focus">
  </div>
  <div id="main-0-1" class="item item-focus">
  </div>
  <div id="main-0-2" class="item item-focus">
  </div>
  <div id="main-0-3" class="item item-focus">
  </div>
</div>
<div id="main-1">
  <div id="main-1-0" class="item item-focus">
    <img src="images/page2-4.png" alt="">
  </div>
  <div id="main-1-1" class="item item-focus">
  </div>
  <div id="main-1-2" class="item item-focus">
  </div>
  <div id="main-1-3" class="item item-focus">
  </div>
</div>



<script>
  function _init() {
    renderSubject();
    getLog({
      programId: TYPEIDS.MAIN3,
      programName: '国宝动画',
      ctype: '1',
      account: USERID,
      usermac: MAC,
      platform: '1'
    })
    onFocus();
  }

  _init()

  function renderSubject() {
    subjects = getTypeListByTypeId({
      TYPEID: TYPEIDS.MAIN3
    }).TYPEs
    for (var i = 0; i < subjects.length; i++) {
      if (i <= 3) {
        $('#main-0-' + i).html('<img src="' + subjects[i].typePicture[0].picPath2 + '"/>')
      } else {
        $('#main-1-' + (i - 3)).html('<img src="' + subjects[i].typePicture[0].picPath2 + '"/>')
      }
    }
  }

  function keyUp() {
    if (loading) return;
    var index = area[focusArea].index;
    freeFocus()
    switch (focusArea) {
      case 2:
        if (index == 3) {
          focusArea = 1;
        } else {
          focusArea = 0;
        }
        break;
      case 3:
        focusArea = 2;
        area[focusArea].index = index;
    }
    onFocus()
  }

  function keyDown() {
    if (loading) return;
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 0:
        focusArea = 2;
        break;
      case 1:
        focusArea = 2;
        area[focusArea].index = 3;
        break;
      case 2:
        focusArea = 3;
        area[focusArea].index = index;
        break;
    }
    onFocus()

  }

  function keyLeft() {
    if (loading) return;
    var index = area[focusArea].index;
    freeFocus()
    switch (focusArea) {
      case 0:
        renderMain(1)
        break;
      case 1:
        if (index > 0) {
          area[focusArea].index--;
        } else {
          focusArea = 0;
          renderMain($('#nav .nav-item').length - 1)
        }
        break
      default:
        if (index > 0) {
          area[focusArea].index--;
        }
    }
    onFocus()
    // window.location.href = PANDA_PATH + 'index.html'
  }

  function keyRight() {
    if (loading) return;
    var index = area[focusArea].index;
    freeFocus()
    switch (focusArea) {
      case 0:
        if ($('#' + area[focusArea].id + 3).length > 0) {
          renderMain(3)
        } else {
          focusArea = 1;
          area[focusArea].index = 0;
        }
        break;
      default:
        index++;
        if ($('#' + area[focusArea].id + index).length > 0) {
          area[focusArea].index++;
        }
        break
    }
    onFocus()
  }

  function keyEnter() {
    if (loading) return;
    isNeed = 1;
    var index = area[focusArea].index;
    var form = PANDA_PATH + "index.html?AREA=" + focusArea + "&INDEX=" + area[focusArea].index + '&HEADER=' + area[0]
      .index;
    switch (focusArea) {
      case 1:
        if (index == 0) {
          GY.addUrl(PANDA_PATH + 'search.html', form);
        } else if (index == 1) {
          GY.addUrl(PANDA_PATH + 'favorite.html', form);
        } else if (index == 2) {
          GY.addUrl(PANDA_PATH + 'history.html', form);
        }
        break;
      case 2:
        var _sitcom = getVodListByTypeId({
          TYPEID: subjects[index].typeId
        }).data[0];
        programGoUrl(_sitcom, form);
        break;
      case 3:
        if (index == 0) {
          GY.addUrl(PANDA_PATH + 'cartoon-class.html', form);
        } else {
          var _sitcom = getVodListByTypeId({
            TYPEID: subjects[index + 3].typeId
          }).data[0];

          programGoUrl(_sitcom, form);
        }
        break;
    }
  }
</script>